<template>
    <div class="container">
        <MapAnimation ref="mapAnimation" />
        <button class="btn" @click="animate1">动画1</button>
        <button class="btn btn2" @click="animate2">动画2</button>
        <button class="btn btn3" @click="changeJson">切换新区/行政区</button>
    </div>
</template>
<script>
import MapAnimation from '../components/MapAnimation.vue'
export default {
    components: {
        MapAnimation
    },
    data() {
        return {
        }
    },
    methods: {
        animate1() {
            this.$refs.mapAnimation.animate1();
        },
        animate2() {
            this.$refs.mapAnimation.animate2();
        },
        changeJson() {
            this.$refs.mapAnimation.changeJson();
        }
    }
}
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    height: 100Vh;
    .btn {
        position: absolute;
        right: 30px;
        bottom: 50px;
    }

    .btn2 {
        right: 100px;
    }
    .btn3 {
        right: 200px;
    }
}
</style>